<template>
  <div class="account-page">
    <a-card :bordered="false">
      <!-- 表格顶部搜索部分 -->
      <c-table-search-form
        v-model="tableSearchForm"
        :datas="tableSearchFormData"
        @onSearch="onSearch"
      ></c-table-search-form>

      <!-- 表格部分 -->
      <c-table
        :columns="tableColumns"
        :datas="tableData"
        :loading="loading"
        showPagination
        :paginationDatas="paginationDatas"
        @onPageSizeChange="onPageSizeChange"
        @onShowNumChange="onShowNumChange"
      >
        <!-- 表格自定义部分 -->
        <template slot="line" slot-scope="line">
          <span>
            {{
            line.tableRow === "1"
            ? "买家"
            : line.tableRow === "2"
            ? "卖家"
            : "买卖家"
            }}
          </span>
        </template>

        <!-- 表格操作按钮 -->
        <template slot="handle" slot-scope="row">
          <a-popconfirm ok-text="确定" cancel-text="取消" @confirm="handleDel([row.tableRow.id])">
            <p slot="title">
              是否确认{{ row.tableRow.resourceState === 0 ? "恢复" : "停止" }}使用测试专用
              <span
                class="colorMain"
              >ces</span>账户？
              <br />
              {{ row.tableRow.resourceState === 0 ? "恢复" : "停止" }}后，与该账户相关的套保规则也将恢复。
            </p>
            <a :class="row.tableRow.resourceState === 0 ? '' : 'textGrey'">
              <Icon
                v-if="row.tableRow.resourceState === 0"
                :iconStyle="startIconStyle"
                :type="'zk-back-start'"
              />
              <a-icon v-else type="stop" />
              {{ row.tableRow.resourceState === 0 ? "恢复" : "停止" }}使用
            </a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a @click="onReset(row.tableRow)">
            <Icon :type="'zk-back-reset'" :iconStyle="iconStyle" />修改账户
          </a>
        </template>
      </c-table>

      <!-- 新增/编辑弹窗 -->
      <a-modal
        title="修改套保账户密码"
        :visible="dialogVisible"
        width="30%"
        @cancel="onModalCancel"
        :confirm-loading="confirmLoading"
        :destroyOnClose="true"
      >
        <c-form-model
          checkStrictly
          :datas="formEditData"
          v-model="form"
          :rules="rules"
          ref="formModels"
        ></c-form-model>
        <div class="drawer-footer-btn flex-center">
          <a-button class="margin-r10" @click="onModalCancel">取消</a-button>
          <a-button type="primary" :loading="confirmLoading" @click="onModalOk">确定</a-button>
        </div>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserList } from "@/api/company/users";

export default {
  name: "Account",
  components: {},
  data() {
    return {
      iconStyle: {
        fontSize: "14px",
        color: "#758cff"
      },
      startIconStyle: {
        fontSize: "14px",
        color: "#758cff"
      },
      dialogVisible: false,
      confirmLoading: false,
      rules: {},
      formEditData: [
        {
          label: "企业简称",
          prop: "companyShortName",
          type: "font"
        },
        {
          label: "期货公司",
          prop: "company",
          type: "font"
        },
        {
          label: "交易账户",
          prop: "company",
          type: "font"
        },
        {
          label: "交易密码",
          prop: "company"
        },
        {
          label: "交易席位",
          prop: "seat",
          type: "radio",
          typeData: [
            {
              label: "主席",
              value: "1"
            },
            {
              label: "次席",
              value: "2"
            }
          ]
        }
      ],
      form: {
        futuresCompany: "1"
      },
      tableSearchForm: {
        searchKey: ""
      },
      tableSearchFormData: [
        {
          label: "请输入企业简称/期货账户",
          prop: "searchKey",
          type: "search"
        }
      ],
      tableColumns: [
        {
          title: "企业简称",
          dataIndex: "userId",
          align: "center",
          width: 120
        },
        {
          title: "期货公司",
          dataIndex: "line",
          align: "center",
          scopedSlots: { customRender: "line" }
        },
        {
          title: "账户",
          dataIndex: "",
          align: "center"
        },
        {
          title: "席位",
          dataIndex: "",
          align: "center"
        },
        {
          title: "账户审核状态",
          dataIndex: "createDate",
          align: "center"
        },
        {
          title: "连接情况",
          dataIndex: "",
          align: "center"
        },
        {
          title: "账户使用状态",
          dataIndex: "",
          align: "center"
        },
        {
          title: "修改时间",
          dataIndex: "",
          align: "center"
        },
        {
          title: "操作",
          key: "handle",
          scopedSlots: { customRender: "handle" },
          align: "center",
          width: 200
        }
      ],
      companyStatusArr: [
        {
          value: "",
          lable: "全部"
        },
        {
          value: "0",
          lable: "待审核"
        },
        {
          value: "1",
          lable: "已通过"
        },
        {
          value: "2",
          lable: "已拒绝"
        }
      ],
      openType: "add",
      companyStatus: "",
      tableData: [],
      paginationDatas: {
        pageSizeOptions: [ "10", "20", "30", "40", "50", "200", "1000" ],
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
    };
  },
  computed: {
    ...mapState({})
  },
  created() {
    this.onPageOnlod();
  },
  mounted() {},
  methods: {
    onPageOnlod() {
      this.loading = true;
      getUserList({
        searchKey: this.tableSearchForm.searchKey,
        pageData: {
          ...{
            pageSize: this.paginationDatas.pageSize,
            pageNum: this.paginationDatas.pageNum
          }
        }
      })
        .then(res => {
          this.tableData = res.data.pageData;
          this.paginationDatas.total = res.data.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onModalCancel() {
      this.dialogVisible = false;
    },
    onShowNumChange(val) {
      this.paginationDatas.pageNum = val;
      this.onPageOnlod();
    },
    onPageSizeChange(val) {
      this.paginationDatas.pageSize = val;
      this.onPageOnlod();
    },
    onModalOk() {},
    onReset() {
      this.dialogVisible = true;
    },
    onSearch() {
      this.onPageOnlod();
    }
  }
};
</script>

<style lang="less" scoped>
</style>


